<template>
    <div class="cgs-store">
        <a-layout>
            <a-layout-header>
                <div class="cgs-store-logo-container">
                    <img class="cgs-store-logo" :src="logo">应用市场
                    <!-- <span class="cgs-store-pageTitle">应用中心</span> -->
                </div>
                <div class="cgs-store-title-container">
                    <span v-for="item in typeList" :key="item.id" @click="selectVisualType(item)" class="cgs-store-type" :class="selectedVisualType===item.id?'selectedVisualType':''">{{item.name}}</span>
                </div>
            </a-layout-header>
            <a-layout-content style="overflow: auto">
                <div class="cgs-store-content">
                    <a-card hoverable class="cgs-store-content-card" v-for="item in templateMap[selectedVisualType]" :key="item.id">
                        <img
                            slot="cover"
                            :alt="item.name"
                            :src="item.coverImg"
                        />
                        <a-card-meta>
                            <template slot="title">
                                <span class="cgs-store-card-title">{{item.name}}</span>
                                <a-tag v-if="item.tags !== null && item.tags.length > 0" color="blue" style="float: right;">{{item.tags[0]}}</a-tag>
                            </template>
                            <template slot="description">
                                <p class="cgs-store-card-desc" :title="item.desc">{{item.desc}}</p>
                            </template> 
                        </a-card-meta>
                        
                        <template slot="actions" class="ant-card-actions">
                            <div class="cgs-store-card-action" :class="setUpAble ? 'setup-able' : 'setup-disabled'" @click="confirmSetup(item)">安装</div>
                        </template>
                    </a-card>
                </div>
            </a-layout-content>
        </a-layout>
    </div>
</template>

<script>
import { getMarketList, setup, setupAPP } from "@/api/appStore"
import {getUserInfo} from "@/api/user";
  import { setUserAuthority, getUserAuthority } from "@/util/auth";
export default {
    data(){
        return{
            typeList:[
                {id: 'TwoD', name: '2D', disabled: false},
                {id: 'ThreeD', name: '3D', disabled: false},
                {id: 'Earth', name: 'Earth', disabled: false},
                {id: 'App', name: 'App', disabled: false},
            ],
            selectedVisualType: 'App',
            templateMap: {},
            loading: null,
            typeMap: {
                TwoD: '2D',
                ThreeD: '3D',
                Earth: 'Earth',
                App: 'App'
            },
            setUpAble: false
            
        }
    },
    computed: {
        logo: {
            get(){
                return this.$store.state.sysInfo.logo
            },
            set(){}
        }
    },
    created(){
        this.typeList.forEach(item => {
            let id = item.id;
            this.templateMap[id] = []
        })
        let userAuth = getUserAuthority()
        if(!!userAuth && 'operatingAuthorities' in userAuth){
            let autherList = userAuth['operatingAuthorities'];
            if(!!autherList && autherList.indexOf('IMPORT') > -1){
                this.setUpAble = true
            }
        }
        
        this.init()
    },
    methods:{
        async init(){
            let templateList = await getMarketList()
            templateList.forEach(temp => {
                let visualType = temp.visualType;
                if(temp.coverImg === '') temp.coverImg = require('@/assets/marketCover.png');
                this.templateMap[visualType].push(temp)
            })
            this.$forceUpdate()
        },
        confirmSetup(temp){
            if(this.setUpAble){
                this.$confirm('是否确认安装?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.openLoading()
                    let request = setupAPP
                    var params = new FormData();
                    params.append('filePath', temp.path)
                    if(temp.visualType !== 'App'){
                        params.append('visualType', temp.visualType)
                        request = setup
                    } else {
                    }
                    let result = await request(params)
                    this.closeLoading()
                    if(result){
                        this.updateAuthority()
                        // this.$message.success(`已成功安装到${this.typeMap[temp.visualType]}默认分类`)
                        this.$confirm(`已成功安装到${this.typeMap[temp.visualType]}默认分类`, '提示', {
                            confirmButtonText: '确定',
                            showCancelButton: false,
                            type: 'success'
                        }).then(async () => {
                        }).catch(() => {
                        });
                    } else {
                        this.$confirm('安装失败，请联系管理员！', '提示', {
                            confirmButtonText: '确定',
                            showCancelButton: false,
                            type: 'error'
                        }).then(async () => {
                        }).catch(() => {
                        });
                    }
                }).catch(() => {
                });
            } else {
                this.$confirm('暂无权限，请联系管理员！', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'error'
                }).then(async () => {
                }).catch(() => {
                });
            }
        },
        selectVisualType(typeConfig){
            this.selectedVisualType = typeConfig.id
        },
        updateAuthority(){
            getUserInfo().then(infoRes => {
                if(infoRes.data && infoRes.data.success){
                    setUserAuthority(infoRes.data.data);
                }
            })
        },
        openLoading() {
            if(this.loading !== null) return
            this.loading = this.$loading({
                lock: true,
                text: '安装中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            // setTimeout(() => {
            //     this.loading.close();
            // }, 2000);
        },
        closeLoading(){
            if(this.loading !== null) {
                this.loading.close();
                this.loading = null;
            }
        }
    }
}
</script>

<style scoped>
.cgs-store{
    width: 100%;
    height: 100%;
}
.cgs-store-logo-container{
    /* width: 100px; */
    height: 60px;
    line-height: 60px;
    text-align: left;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 20px;
    font-size: 25px;
    font-weight: 900
}
.cgs-store-logo{
    height: 40px;
    margin-right: 10px;
}
.cgs-store-title-container{
    text-align: center;
    font-size: 30px;
    font-weight: 900;
}    
.cgs-store-content{
    box-sizing: content-box;
    width: 1300px;
    padding: 20px 56px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}
.cgs-store-content-card{
    width: 300px;
    margin: 0px 10px 20px 10px;
    border-radius: 20px;
}
.cgs-store-card-action{
    height: 100%;
    width: 100%;
    border-radius: 0px 0px 20px 20px;
    padding: 12px 0px;
    color: #fff
}
.cgs-store-card-action.setup-able:hover{
    background: #40a9ff
}
.cgs-store-card-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
}
.cgs-store-type{
    margin: 0px 25px;
    font-size: 20px;
    font-weight: 400;
    color: rgba(43,52,65,.6);
    cursor: pointer;

}
.cgs-store-type:hover:not(.selectedVisualType){
    color: #2b3441
}
.cgs-store-type.selectedVisualType{
    font-weight: 500;
    color: #2b3441;
    position: relative;

}
.cgs-store-type.selectedVisualType:after{
    position: absolute;
    bottom: -17px;
    left: 50%;
    width: 36px;
    height: 5px;
    border-radius: 2px;
    content: "";
    background: #fb9337;
    transform: translateX(-50%);

}
.setup-disabled{
    background: #808fa3;
    cursor:not-allowed;
}
.setup-able{
    background: #1890ff;
}
/* 最后一项margin-right:auto */
/* .cgs-store-content-card{
    margin-right: auto;
} */
</style>
<style>
.cgs-store .ant-layout{
    width: 100%;
    height: 100%;    
    background: #fff;
}
.cgs-store .ant-layout-header{
    background: unset;
    height: 60px;
    line-height: 60px;
    padding: 0 6px 0 24px;
    box-shadow: 0 4px 10px 0 rgb(12 31 80 / 8%);
}
.cgs-store-content-card .ant-card-cover img{
    border-radius: 20px 20px 0px 0px;
}
.cgs-store-content-card .ant-card-actions{
    border-top: unset;
    background: unset;
}
.cgs-store-content-card .ant-card-actions > li{
    margin: unset;
}
.cgs-store-content-card .ant-card-meta{
    height: 120px;
}
.cgs-store-content-card.ant-card-hoverable:hover{ 
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.5);
}
.cgs-store-content-card.ant-card-hoverable{
    box-shadow: 0 1px 6px rgb(0 0 0 / 50%);
}
.cgs-store-content-card.ant-card-bordered{
    border: unset;
}
</style>